<template>
  <div class="home">
    <Hitem v-for="product in products" v-bind:key = "product.slogan" v-bind:height="fullHeight" v-bind:title="product.title" :slogan="product.slogan" :introduction="product.introduction" :routerName="product.routerName" :img="product.img" :linkName="product.linkName"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Hitem from "@/components/Hitem.vue";

export default {
  name: "home",
  components: {
    Hitem
  },
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      homeImgNavClass: {
        width: "60%",
        color: "red",
        fontSize: "13px"
      },
      products: [
        {
          img:  "http://pcera22ot.bkt.clouddn.com/rakutenCover2.png" ,
          title: "Rakuten Anywhere",
          slogan: "混合现实智能购物系统",
          introduction: "用户行为和用户所处的环境所包含的数据暗示了用户的购物需求。本项目旨在结合用户在Rakuten线上的购物行为和用户所处的环境信息，为用户提供智能的混合现实购物体验。",
          routerName: "https://pan.baidu.com/s/12us8eOCijvgt0gQekp49UQ",
          linkName: "前往百度网盘下载更多资料"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/stillwalking.png" ,
          title: "STILLWALKING 步履不停",
          slogan: "结合攻略和社交的游记网站",
          introduction: "结合攻略和社交的游记网站，关键词自然是攻略和社交， 游记，一般都详细的记录了旅游过程，往往具有旅行攻略的性质。而以简短信息分享为核心社交网络，包含的信息量少，更强调分享者的心情。长篇的游记和简短的社交动态似乎看起来格格不入，但实际上，它们有一个共同的来源，旅游本身。 我们希望能将两者结合起来，打造出一个能同时满足用户记录、检索游记和即时社交的旅游网站。",
          routerName: "https://pan.baidu.com/s/1y6c_audqba96armIZcCkJQ",
          linkName: "前往百度网盘下载更多资料"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/最具影响力.png" ,
          title: "东南大学最具影响力毕业生官方网站",
          slogan: "信息录入与在线投票",
          introduction: " 用于选出东南大学2017届最具影响力毕业生-最具人气奖。网站包括一个可供选手上传信息的页面和投票页面。选手在上传信息时，仅需粘贴任意视频网站连接到表单，就可以在展示界面显示相应的视频。当前网站为2018届影响力毕业生官网，取消了可选择上传的宣传视频，其余UI和前端代码沿用去年的设计。每年活动期间PV超过50万，约10万个IP使用该网站参与投票。",
          routerName: "http://yxl.seu.edu.cn",
          linkName: "前往东南大学最具影响力毕业生官方网站"        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/recycle.png" ,
          title: "竞赛项目 Recycle",
          slogan: "寓教于乐的垃圾分类游戏",
          introduction: " Recycle是一款消除类公益游戏，整个游戏的逻辑就是人类处理垃圾的过程，游戏面板是我们赖以生存的地球，上面分布的方块是我们产生的垃圾，随着人类的活动，每隔一段时间，地球上就会产生新的垃圾。游戏中的玩家，也就是人类，如果及时、正确的处理了垃圾，垃圾就会被合理回收，二次利用，变废为宝，从而消失；如果没有及时处理垃圾，或者错误的处理了垃圾，新的垃圾会产生，同时，垃圾铺满地球的速度也会增加，到了游戏后期，垃圾增长的速度越来越快，玩家也会更努力地去消除垃圾，但是往往由于前期的失误，垃圾增长速度已经到了不可控的地步，这个时候，面对游戏屏幕，玩家就会有一种绝望的窒息感，只能眼睁睁的看着地球被垃圾铺满，等待游戏结束。我希望以此来让玩家感受，合理回收垃圾的重要性。",
          routerName: "https://pan.baidu.com/s/16KTBbrWNUnXK7pcav9boGg",
          linkName: "前往百度网盘下载更多资料"        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/gallery.png" ,
          title: "Gallery",
          slogan: "艺术家的在线画廊，艺术爱好者的资源库",
          introduction: "封闭社群，拟物化设计，仿佛置身真实画廊。",
          routerName: "https://github.com/QShen3/ArtGallery",
          linkName: "前往Github查看项目源码"        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "HOWTO颢豆",
          slogan: "颢豆灵感，精品与在线CD",
          introduction: " HOWTO颢豆是我的个人站点,包含灵感、作品、记念CD、联名系列及BEHOWTO五个子页面，提供纪念CD在线收听，HOWTO精品在线购买服务。",
          routerName: "http://ihowto.cn",
          linkName: "访问HOWTO颢豆"        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/SMstartgame.png" ,
          title: "超级冒险岛",
          slogan: "超级玛丽乱入冒险岛",
          introduction: " 超级冒险岛是我的第一款应用程序，在游戏里可以看到以冒险岛和超级玛丽为主的红白机小游戏的元素。游戏的设定是由于玩完红白机后没有及时整理游戏卡，各个游戏中的大BOSS感染到了高桥名人冒险岛的世界中。为了恢复正常的世界，高桥名人和女朋友高桥惠子重新开始保卫冒险岛世界，他们首先要面对的，是来自超级玛丽游戏中的各种角色。",
           routerName: "/"    },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/webar.png" ,
          title: "WebAR",
          slogan: "浏览器上的AR开发框架",
          introduction: "结合ARToolKit的追踪和WebAR库的渲染能力，从项目中总结WebAR发展的瓶颈及解决思路。",
          routerName: "https://pan.baidu.com/s/1MMN3puPkxcumV41QOhOGWA",
          linkName: "前往百度网盘下载更多资料"        }
      ]
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.fullHeight = window.fullHeight;
      })();
    };
  },
  watch: {
    //监听窗口高度
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  }
};
</script>
<style>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item {
  margin-top: 10%;
}
</style>